<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
       <div id="root">
            <h1 >{{n}}</h1>
            <button @click="add">n++</button>
            <button @click="bye">bye</button>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        n: 1
                    }
                },
                methods:{
                    add(){
                        this.n++
                    },
                    bye(){
                        this.$destroy()
                    }
                },
                watch:{
                    n(){
                        console.log('n变了');
                    }
                },
                //4对,创建数据,挂载dom,更新数据,死
                //针对数据
                beforeCreate(){
                    console.log("beforeCreate")//事件好了
                    console.log(this);//没有数据代理(data)
                },
                created(){
                    console.log('created');//数据检测数据代理好了
                    
                },
                beforeMount(){
                    console.log('beforeMount');//页面还是没有真实dom,虚拟dom好了
                    console.log(this)//这时候操作dom无效
                },
                mounted(){
                    console.log('mounted');//dom完成,初始化结束
                    console.log(this)//一般:开启定时器,发送网络请求,订阅消息,绑定自定义时间等初始化操作
                },
                beforeUpdate(){
                    console.log('beforeUpdate');
                    console.log(this.n);//数据更新,页面是旧的
                },
                // mvvm 更新完成,diff
                updated(){
                    //数据更新,页面也更新了
                    console.log('updated');
                },
                //vm.$destroy
                beforeDestroy(){
                    //保留dom最后的样子
                    console.log('beforeDestroy');
                    console.log(this.n,'beforeDestroy');
                    
                    //data.methods,指令可用.即将执行销毁,||| 真dom视图无法更新了(data改变)
                    //一般用来关闭定时器,取消订阅消息,解绑自定义时间等 ||| 收尾操作
                    
                },
                destroyed(){
                    //销毁watches 子组件,事件监听器
                    console.log('destroyed');

                },

            })
          
        </script>
    </body>
</html>
